<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-05-28 10:27:09
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-05-28 17:56:02
 * @FilePath: \guanggu-traffic\src\components\public\Mapinit.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <!-- 创建一个底图容器 -->
 <div id="map"></div>
</template>

<script setup>
import {onMounted} from 'vue'
const tiandituKey = import.meta.env.VITE_TIANDITU_KEY;
import {app} from '@/main'
onMounted(()=>{
    // 影像地图
    const imageLayer = new ol.layer.Tile({
        title: "影像底图",
        source: new ol.source.XYZ({
            url: `http://t0.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles&tk=${tiandituKey}`,
            wrapX: false,
            crossOrigin: "Anonymous",
        }),
        // zIndex: 12
    });
    /* 瓦片图层 */
    const vectorLayer = new ol.layer.Tile({
        title: "矢量底图",
        source: new ol.source.XYZ({
            url: `http://t0.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles&tk=${tiandituKey}`,
            wrapX: false,
            crossOrigin: "Anonymous",
        }),
    });

    //注记图层
    const markerLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: `http://t0.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles&tk=${tiandituKey}`,
            attributions: "天地图",
            wrapX: false,
            crossOrigin: "Anonymous",
        }),
    });
    //实例化地图
    const map = new ol.Map({
        target:'map',
        layers: [imageLayer, vectorLayer,markerLayer],
        // layers: [gaode],
        // 视图 设置地图的中心点 放大级别 
        view: new ol.View({
        center: [114.30, 30.50], //设置地图中心点
        zoom: 12, //设置地放大级别
        projection: 'EPSG:4326' //设置坐标
        })
    })
    setTimeout(()=>{
        map.getView().animate({
            center:[114.30, 30.50],
            zoom:12,
            duration:1500,

        })
    },300)
    //添加Mapgis地图服务
    const docLayer = new Zondy.Map.Doc("",'guanggu',{
        ip:"localhost",
        port:6163,
    })
    map.addLayer(docLayer);
    //设置图层名称
    docLayer.set('title',"mapgi图层");
    //添加全局$map属性
    app.config.globalProperties.$map = map;
})
 
 
</script>

<style scoped>
  #map{
    width: 100vw;
    height: 100vh;
  }
</style>